<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的音乐网</title>
    <link href="css/style.css" rel="stylesheet">
    <script src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        var index = 1;
        window.setInterval(function () {
            var imgObj = document.getElementById("binnerImg");
            if(index == 6){
                index = 1;
            }
            imgObj.src = "img/"+index+".jpg";
            index ++ ;
        },2000);
    </script>
</head>
<body>
<div id="content">
    <div id="div-top">
        <div id="top-left">
            ♫ MyPlayer
        </div>
        <div id="top-right">
            <input id="keyWord" placeholder="搜索歌手、歌名、专辑" type="text"/>
            <button id="search">搜索</button>
        </div>
    </div>
    <div id="div-main">
        <div id="banner">
            <img id="binnerImg" src="img/1.jpg" width="1000px">
        </div>
        <div>
            <marquee id="mq"></marquee>
        </div>
        <div id="main-left">
            <table id="tb" width="100%" cellpadding="4px">
                <tr>
                    <th>序号</th>
                    <th>歌曲</th>
                    <th>歌手</th>
                    <th>专辑</th>
                    <th>时长</th>
                    <th>操作</th>
                </tr>


            </table>
        </div>
        <div id="main-right">
            <img id="image" src="img/largePic.jpg" width="300px"/><br/>
            <audio id="bfq" src="music/154364109.mp3" controls></audio>
            <!--下方来展示歌词-->
            <div id="lyric" style="text-align: center;width: 300px;height: 1000px;overflow: hidden">
            </div>
        </div>
    </div>
</div>


<script>
    //jquery入口函数
    $(function (){
        //给搜索按钮来绑定点击事件
        $("#search").click(function (){
            //发送异步请求到searchMusic的后台，将搜索框中输入的关键词携带到后台
            $.post("/searchMusic",{"key":$("#keyWord").val()},function (result){
                // console.log(result)
                //搜索歌曲之前现将table中的数据清空一下
                $("#tb tr td").remove();
                //回调函数是指我们后台响应给前台的结果集,result其实就是我们搜索产生的结果集
                for(var i = 0;i<result.length;i++){
                    var trtd = "<tr>\n" +
                        "                    <td>"+(i+1)+"</td>\n" +
                        "                    <td>"+result[i].name+"</td>\n" +
                        "                    <td>"+result[i].artist+"</td>\n" +
                        "                    <td>"+result[i].album+"</td>\n" +
                        "                    <td>"+result[i].songTimeMinutes+"</td>\n" +
                        "                    <td>\n" +
                        "                        <img onclick=\"playMusic(\'"+result[i].rid+"'\,\'"+result[i].name+"'\,\'"+result[i].pic+"'\)\" style=\"width: 35px;height: 35px\" src=\"img/play.jpg\">\n" +
                        "                        <img onclick=\"downMusic(\'"+result[i].rid+"'\,\'"+result[i].artist+"'\,\'"+result[i].name+"'\)\" style=\"width: 35px;height: 35px\" src=\"img/down.jpg\">\n" +
                        "                        <img onclick='getComment("+result[i].rid+")' style=\"width: 35px;height: 35px\" src=\"img/1.png\">\n" +
                        "                    </td>\n" +
                        "                </tr>";
                    //将歌曲的列表追加到table表格中
                    $("#tb").append(trtd);
                }
            },"JSON")
        })
    })

    //点击评论图标将rid写到到评论页面
    function getComment(rid){
        //跳转评论页面，并将rid带入到评论页面中
        location.href = "http://localhost:8080/comment?rid="+rid;
    }

    //下载歌曲到本地磁盘
    function downMusic(rid,artist,name){
        //将参数携带到后台
        $.post("/downMusic",{"rid":rid,"artist":artist,"name":name},function (result){
            alert(result)
        })
    }

    //播放音乐的方法
    function playMusic(rid,name,pic){
        //项后台发送异步请求，将rid传递到后台 playMusic
        $.post("/playMusic",{"rid":rid},function (result){
            //result 是由后台响应给前端的音乐播放地址
            $("#bfq").attr("src",result);
            //如何实现自动播放
            $("#bfq").get(0).play();
        })

        //设置跑马灯显示正在播放的歌曲名称
        $("#mq").text("正在播放:"+name);
        //设置正在播放的歌曲图片
        $("#image").attr("src",pic)

        //加载歌词信息
        //清空掉之前的歌词信息
        $("#lyric p").remove()
        $.post("/getLyric",{"rid":rid},function (result){
            //回调函数result就是我们后台响应给页面的歌词信息
            for(var i = 0;i<result.length;i++){
                var lyric = result[i].lineLyric;//这是每行歌词
                $("#lyric").append("<p>"+lyric+"</p>");
            }
        })
    }

</script>


</body>
</html>